<script setup>
import {ref} from "vue";

const flag = ref(true);

const vShowtext = {
  //必须以 vNameOfDirective 的形式来命名本地自定义指令，以使得它们可以直接在模板中使用。
  created(el, binding, vNode) {
    console.log('Created', el, binding, vNode)
  },
  // 在元素被插入到 DOM 前调用
  beforeMount(el, binding, vNode) {
    console.log('BeforeMount', el, binding, vNode)
  },
  // 在绑定元素的父组件

  // 及他自己的所有子节点都挂载完成后调用
  mounted(el, binding, vNode) {
    console.log('Mounted', el, binding, vNode)
  },
  // 绑定元素的父组件更新前调用
  beforeUpdate(el, binding, vNode, prevNode) {
    console.log('BeforeUpdate', el, binding, vNode, prevNode)
  },
  // 在绑定元素的父组件
  // 及他自己的所有子节点都更新后调用
  updated(el, binding, vNode, prevNode) {
    console.log('Updated', el, binding, vNode, prevNode)
  },
  // 绑定元素的父组件卸载前调用
  beforeUnmount(el, binding, vNode) {
    console.log('BeforeUnmount', el, binding, vNode)
  },
  // 绑定元素的父组件卸载后调用
  unmounted(el, binding, vNode) {
    console.log('Unmounted', el, binding, vNode)
  }
}
</script>

<template>
  <div class="container">
    <button @click="flag=!flag">change</button>
      <div v-showtext:aaa.b.c="flag" class="box">自定义指令</div>
  </div>
</template>

<style scoped>
.container {
  width: 300px;
  height: 200px;
  margin: 0 auto;
  margin-bottom: 8px;
  .box{
    background-color: aquamarine;
    height: 100%;
  }
}
</style>